@extends('layouts.admin')
@section('pageTitle', '新建投放')
@inject('storeService', 'App\App\Services\StorageService')
@section('style')
    <link rel="stylesheet" href="/css/admin/jquery_validate.css">
    <style>

        /*meiyun*/
        .mgud{
            margin: 20px auto;
        }
        .mgb10{
            margin-bottom: 10px;
        }
        .mgr30{
            margin-right: 30px;
        }
        /*.main-panel{*/
            /*overflow: auto;*/
        /*}*/

        .card form [class*="col-"]:first-child {
            padding: 0 6px;
        }

        .card form [class*="col-"]:last-child {
            padding: 0 6px;
        }

        .template-active-img img {
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .template-active-img .user-template-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -22px;
        }
        .template-active-img .template-qrcode {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            display: none;
        }
        .template-active-img:hover .template-qrcode{
            display:block
        }
    </style>
@endsection
@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                       <div class="card">
                            <div class="content content-full-width">

                                <form id="wizardForm" class="form-horizontal" data-back="/web/activityDelivery/index" method="post" action="/web/activityDelivery/add" >

                                    <div class="row">
                                        <div class="col-xs-4 app">
                                            <div class="phone-view">
                                                <div class="app-view">
                                                    <div class="point-app-mainC">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">规则名称</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <input class="form-control point-rule-name" id="point_rule_name" type="text"
                                                                   placeholder="请输入规则名称，最多支持20个字符"
                                                                   maxlength=20
                                                                   name="name"
                                                                   {{--required="required" data-msg="请输入规则名称，最多支持20个字符"--}}
                                                            />
                                                        </div>
                                                    </div>
                                                    @if(empty($data))
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">活动位置</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <a href="/web/activityPoint/index?action=new_point" target="_self">请先完成位置埋点</a>
                                                        </div>
                                                    </div>
                                                    @else
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">活动位置</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            @foreach($data as $key=>$val )
                                                            <label class="radio-inline">
                                                                <input type="radio" name="point_id" class="" value="{{$val['id']}}" @if($key==0)checked @endif> {{$val['point_name']}}
                                                            </label>
                                                            @endforeach

                                                        </div>
                                                    </div>
                                                    @endif
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">选择平台</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="platform[]" id="delivery_platform" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_JS}}" checked> Js
                                                            </label>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="platform[]" id="delivery_platform" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_IOS}}"> iOS
                                                            </label>
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="platform[]" id="delivery_platform" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_PLATFORM_ANDROID}}"> Android
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 col-sm-offset-1 control-label">投放类型</label>
                                                        <div class="col-sm-7 col-sm-offset-1">
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" class="point-put-category-banner" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_BANNER}}" checked> Banner
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" class="point-put-category-home" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_HOME}}"> 启动页
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" class="point-put-category-flow" value="{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_INFO_FLOW}}"> 信息流
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-sm-9 col-sm-offset-2">
                                                            <ul class="nav nav-tabs" role="tablist">
                                                                {{--<li style="float: left" class="add-pointput-inf"><i class="fa fa-plus"></i></li>--}}
                                                            </ul>
                                                            <div class="tab-content">


                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="footer pull-center">

                                        <input type="submit" class="btn btn-info btn-fill btn-wd btn-finish sponsor_sur" value="完成"/>

                                        <div class="clearfix"></div>
                                    </div>

                       </form>

                     </div>
                 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('script')
    <script src="/js/admin/closable-tab-div.js"></script>
    <script>

        function beforeSubmitValidate() {
            var checkedPlatform = $("input:checkbox[name='platform[]']:checked").length;
            var type = $("input:radio[name='type']:checked").length;
            var name = $('input[name="name"]').val();
            var point_id = $('input[name="point_id"]').val();

            name = name.trim();

            if(name == ''){
                utils.showNotification('规则名称不能为空',3);
                return false;
            }else if(name.length>20){
                utils.showNotification('规则名称不能大于20个字符集',3);
                return false;
            }
            if(point_id == ''){
                utils.showNotification('请选择活动位置',3);
                return false;
            }
            if(checkedPlatform == 0){
                utils.showNotification('请选择平台',3);
                return false;
            }
            if(type == 0){
                utils.showNotification('请选择投放类型',3);
                return false;
            }
            var hasError =false;
            $('.tab-pane').each(function (i,v) {
                var index = $(v).data('index');
                var begin_time = $('input[name="detail['+index+'][begin_time]"]').val();
                var end_time= $('input[name="detail['+index+'][end_time]"]').val();
                var addAction=$('input[name="detail['+index+'][act_name]"]').val();
                var actionType=$('input[name="detail['+index+'][act_type]"]').val();
                var ts=/^((https|http)?:\/\/)[^\s]+/;
                var start=moment(begin_time).unix();
                var end=moment(end_time).unix();
                if (!begin_time||!end_time){
                    console.log(begin_time);
                    utils.showNotification('请将ID'+(index+1)+'中的信息填写完整',3);
                    hasError = true;
                    return false;
                }else if(start>end) {
                    utils.showNotification('ID' + (index + 1) + '中开始时间不能大于结束时间', 3);
                    hasError = true;
                    return false;
                }else if(!addAction){
                    utils.showNotification('请添加ID' + (index + 1) + '中的投放活动', 3);
                    hasError = true;
                    return false;
                }else if(addAction&&actionType==2&&!ts.test(addAction)){
                    utils.showNotification('请在ID' + (index + 1) + '中添加正确的投放活动地址，如：http://', 3);
                    hasError = true;
                    return false;
                }
            });
            if (hasError){
                return false;
            }
            return true;
        }

        $(document).ready(function () {

            $('.point-put-category-banner').click(function () {
                $('.point-app-mainC').css('background-image','url(/images/admin/put_banner.png)');
            });
            $('.point-put-category-home').click(function () {
                $('.point-app-mainC').css('background-image','url(/images/admin/put_home_page.png)');
            });
            $('.point-put-category-flow').click(function () {
                $('.point-app-mainC').css('background-image','url(/images/admin/put_flow.png)');
            });
            $('.point-rule-name').blur(function () {
                if($('.point-rule-name').val()==''){
                    $('.point-rule-name').attr('placeholder','请输入规则名称，最多支持20个字符');
                }
            });
            window.pointid=1;
            var item = {'id':window.pointid,'name':'ID'+window.pointid,'closable':false};
            closableTab.addTab(item);
            <!--添加投点详情-->
            $('.add-pointput-inf').click(function () {
                window.pointid++;
                var name ='ID'+window.pointid;
                var uri ='/web/activityPoint/addPointTV';
                var closable = 1;
                var item = {'id':window.pointid,'name':name,'closable':closable==1?true:false};
                closableTab.addTab(item);
                console.log($('.datetimepicker'));
                console.log($('.datetimepicker').length);
//                console.log($('.datetimepicker')[0].val);
            });

        });



        <!--购买奖品表格-->

        window.operateEvents = {
            'click .operate_buyprize':function (e,value,row) {
                var utilprice=row.prize_money;
                $('.modal-count-price').empty();
                $('.modal-buy-prizenumber').val('');
                $('.modal-unit-price').empty();
                $('.modal-unit-price').html(utilprice+"元");
                $('.modal-buy-prizenumber').on('input',function () {
                    var number=$(this).val();
                    var sum=number*utilprice;
                    $('.modal-count-price').empty();
                    $('.modal-count-price').html(sum+"元");
                })
            }

        };
        function operateFormatter(value, row) {
            return '<a class="btn btn-warning btn-fill selectActivity">选取</a>';
        }
        $('#bootstrap-table-container').on('post-body.bs.table',function () {
            $('[rel="tooltip"]').tooltip();

        });
        //点击投放活动事件
        function actType(obj){
            var act_type = $(obj).data('val');
            var oo =$(obj).parent().parent().prev();
            oo.val(act_type);//设置数值
            if(act_type == "{{\App\Models\ActivityDelivery\ActivityDelivery::ACTIVITY_DELIVERY_ACT_TYPE_LIST}}"){
                oo.prev().text('列表活动');

                $('input[aria-label="添加活动"]').attr({
                    'placeholder':'+添加活动'
                });

            }else{
//                $('input[aria-label="添加活动"]').attr('placeholder','请输入活动地址：(示例) http://');
                $('input[aria-label="添加活动"]').attr({
                    'placeholder':'请输入活动地址：(示例) http://'
                });
                oo.prev().text('自有活动');
            }
        }
        var globObj;
        function categoryFormatter(value,row) {
            return row.model.name;
        }
        window.operateEvents = {
            'click .selectActivity':function (e,value,row) {
                //给选择框设置数据
                $(globObj).val(row.name);
                $(globObj).prev().val(row.id);
            }
        };
        function show_activity_deliveries(obj) {
            var vv = $(obj).next().children('input[data-name="act_type"]').val();
            globObj = obj;
            // 判断：1-列表活动  2-自有活动
            if(vv == 1) {
                $addprize = utils.modal('选择活动', function (ele) {
                    var category = $('input[name="category"]').val();
                    var html = '<table class="table-responsive" id="activitySelectTable">' +
                        '<thead><tr>' +
                        '<th data-field="name">活动名称</th>' +
                        '<th data-field="model.name" data-formatter="categoryFormatter">类型</th>' +
                        '<th data-field="created_at">创建时间</th>' +
                        '<th data-field="startTime">有效期</th>' +
                        '<th data-field="actions" class="td-actions text-center" data-events="operateEvents" data-formatter="operateFormatter">操作</th>' +
                        '</tr></thead>' +
                        '</table>';
                    ele.find('.modal-body').html(html);
                    var table_option = {
                        searchAlign: 'left',
                        queryParams: function (query) {
                            query['category'] = "{{\App\Models\Activity\Activity::ACTIVITY_CATEGORY_H5}}";
                            return query;
                        },
                        url: '/web/activity/list'
                    }
                    default_table_option = $.extend(default_table_option, table_option);
                    $('#activitySelectTable').bootstrapTable(default_table_option);
                    $('#activitySelectTable').on('click', '.selectActivity', function () {
                        $addprize.modal('hide');
                    })
                }, false, function (res) {
                    if (res == 1) {
                        $addprize.modal('hide');
                    }
                })
            }
        };



    </script>
@endsection